<!--
 * @Description: 通讯录页面
 * @Author: wws1993
 * @Date: 2020-12-02 10:52:52
 * @LastEditTime: 2020-12-03 17:38:06
 * @LastEditors: wws1993
 * @FilePath: \TODO-MANAGER\src\components\MailListModule\index.vue
-->

<template>
  <div>
    <el-dialog
      custom-class="CssTurnPage"
      width="800px"
      :visible="visible"
      title="通讯录"
      append-to-body
      @close="toggleVisible"
      >
      <CssTurnPage ref="CssTurnPage" :data="persons">
        <div class="item" slot-scope="{item}">
          <section>
            <label>姓名：</label>
            <span>{{item.name}}</span>
          </section>
          <section>
            <label>电话：</label>
            <span>{{item.phone}}</span>
          </section>
          <section>
            <label>公司：</label>
            <span>{{item.companyName}}</span>
          </section>
          <section>
            <label>职位：</label>
            <span>{{item.job}}</span>
          </section>
          <section>
            <label>参与项目：</label>
            <template v-if="!item.historyProject || item.historyProject.length === 0">
              <span>此人贼懒，未参与任何项目</span>
            </template>
            <template v-else>
              <div class="projectItem" v-for="project in item.historyProject" :key="project.id">
                {{project.name}}
              </div>
            </template>
          </section>
        </div>
      </CssTurnPage>
    </el-dialog>

    <add />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import CssTurnPage from './CssTurnPage.vue';
import Add from './add.vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import { mapState, mapMutations } from 'vuex';

@Component({
  components: { CssTurnPage, Add },
  computed: {
    ...mapState({
      visible: (state: any) => state.MailListModule.visible,
      persons: (state: any) => state.MailListModule.data,
    }),
  },
  methods: {
    ...mapMutations({
      toggleVisible: 'MailListModule/toggleVisible',
    }),
  },
  mounted() {
    this.$store.dispatch('MailListModule/query');
  },
})
export default class MailListModule extends Vue {
  @Watch('visible')
  private toggleMailList(state: boolean) {
    if (state) {
      setTimeout(() => {
        const ref = this.$refs.CssTurnPage as any;
        ref.openCover();
      }, 0);
    } else {
      const ref = this.$refs.CssTurnPage as any;
      ref.closeCover();
    }
  }
}
</script>

<style lang="scss">
.CssTurnPage .el-dialog__body{display:flex; justify-content:center; padding-bottom:60px;}
</style>

<style lang="scss" scoped>
.item{font-size:16px;
  label{color:#999}
  span{color:#333}
  section + section{margin-top:10px;}

  .projectItem{overflow:hidden; text-overflow:ellipsis; }
}
</style>